import React from 'react';
import {Table, Row, Col, Form, Button, Popconfirm} from 'antd';
const R = require('ramda');
import EditRecAcc from '../components/EditRecAcc';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
const FormItem = Form.Item;

export default Form.create({wrappedComponentRef: true})(class Recacc extends React.Component {
    constructor(props) {
        super(props);
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleOpenAdd = () => {
        this.editRecAcc.handleOpen("add");
    }


    onEdit = (record, type) => {
        this.props.dispatch({type: 'customerManage/getRecAccById', payload: {id: record.id}});
        this.editRecAcc.handleOpen(type);
    };

    columns = [
        {title: '收款人名称', dataIndex: 'payeename', key: 'payeename'},
        {title: '开户银行', dataIndex: 'openbankName', key: 'openbankName'},
        {title: '开户支行', dataIndex: 'bankbranch', key: 'bankbranch'},
        {title: '收款人账号', dataIndex: 'payeeno', key: 'payeeno'},
        {title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
        {title: '创建时间', dataIndex: 'createtime', key: 'createtime'},
        {title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                return (
                    <span>

                        {this.props.disabled == true ?
                            <span>
                                 <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                            </span>
                            :
                            <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_RECACC_DELETE}><span>
                                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'}
                                 onConfirm={() => {
                                    this.props.dispatch({
                                             type: 'customerManage/deleteRecAccById',
                                             payload: {
                                                 id: record.id,
                                                 cstid: record.cstid,
                                             }
                                         })
                                    }} okText="是" cancelText="否">
                                    <a href="#" disabled={this.props.disabled}>删除</a>
                                </Popconfirm>
                            </span></RightBox>
                        }
                    </span>
                );
            }
        }];

    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };
        let values = this.props.form.getFieldsValue();
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.recAccPage.size,
            total: this.props.recAccPage.totalRow,
            showSizeChanger: true,
            current: this.props.recAccPage.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.recAccPage;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customerManage/getRecAccList',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                        cstId: this.props.cstid
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.recAccPage;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'customerManage/getRecAccList',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                        cstId: this.props.cstid
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem>
                                <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_RECACC_ADD}>
                                    <Button type="primary" icon="plus" size={'default'} disabled={this.props.disabled} onClick={this.handleOpenAdd.bind(this)} style={{display: dataSource.chargestatus !== "2" ? 'inline-block' : 'none'}}>增加收款人账户</Button>
                                </RightBox>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table dataSource={this.props.recAccList} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll={{x:true}}/>

                <EditRecAcc wrappedComponentRef={(inst) => this.editRecAcc = inst} dispatch={this.props.dispatch} dataSource={this.props.recAcc} cstId={this.props.cstid}/>

            </div>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/supplier/components/Recacc.js